import { useState, useEffect } from 'react';
import { getCurrentWindow } from '@tauri-apps/api/window';
import WindowControls from '../WindowControls';

interface TitleBarProps {
  title?: string;
  className?: string;
  draggable?: boolean;
}

const TitleBar: React.FC<TitleBarProps> = ({
  title = 'Movie Tools',
  className = '',
  draggable = true,
}) => {
  const [_isMaximized, setIsMaximized] = useState(false);

  useEffect(() => {
    const checkMaximized = async () => {
      try {
        const window = getCurrentWindow();
        const isMaximized = await window.isMaximized();
        setIsMaximized(isMaximized);
      } catch (error) {
        console.error('Failed to check window state:', error);
      }
    };

    checkMaximized();
  }, []);

  return (
    <div
      className={`flex justify-between items-center px-4 py-2 border-b backdrop-blur-sm bg-gray-900/80 border-gray-700/50 ${className}`}
      style={{
        // @ts-ignore - WebkitAppRegion is a custom property
        WebkitAppRegion: draggable ? 'drag' : 'no-drag',
        userSelect: 'none',
      }}
    >
      {/* Left side - Logo and Title */}
      <div className='flex items-center space-x-3'>
        <div className='flex justify-center items-center w-6 h-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg'>
          <span className='text-xs font-bold text-white'>M</span>
        </div>
        <h1 className='text-sm font-medium text-white'>{title}</h1>
      </div>

      {/* Right side - Window Controls */}
      <div
        style={{
          // @ts-ignore - WebkitAppRegion is a custom property
          WebkitAppRegion: 'no-drag',
        }}
      >
        <WindowControls />
      </div>
    </div>
  );
};

export default TitleBar;
